<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三.其他样式相关的属性</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 10px yellow solid;
        }
        #box2{
            padding: 100px;
            background-color: green;

        }
        #box4{
            height: 300px;
            width: 200px;
            background-color: pink;
            overflow: auto;
        }
        #box5{
            width: 450px;
            height: 600px;
            background-color:yellowgreen;
        }
    </style>
    <script>
        window.onload=function(){
        var btn01=document.getElementById("btn01");
        var box1=document.getElementById("box1");
        var box4=document.getElementById("box4");
        btn01.onclick=function(){
            /* 
                clientWidth
                clientHeight
                -这两个属性可以获取元素的可见宽度和可见高度
                -这些属性都是不带px的,则返回的都是一个数字，可以直接计算
                会获取元素高度和宽度，包括内容区和和内边距
                这些属性都是只读的不能修改,修改只能通过style
            */

        //    alert(box1.clientWidth);
        //    box1.clientWidth="300px;"

           /* 
            offsetWidth
            offsetHeight
            -获取元素的整个的宽度和高度，包括内容区，内边距，边框
           */

        //    alert(box1.offsetHeight);

           /* 
            offsetParent
            -可以用来获取当前元素的定位父元素
            会获取离当前元素最近的开启了定位的祖先元素
            如果所有的祖先元素都没有开启定位，则返回body

           */

          var op=box1.offsetParent;
          alert(op.id);

          /* 
            offsetLeft
            -当前元素相对于其定位父元素的水平偏移量
            -offsetTop
            当前元素相对于其定位父元素的垂直偏移量
          */

        //  alert(box1.offsetLeft);

        /* 
        scrollWidth
        scrollHeight
        -可以 获取到元素整个滚动区域的宽度和高度
        */

        // alert(box4.clientWidth);
        // alert(box4.scrollHeight);

         /* 
            scrollLeft
            -可以获取水平滚动条滚动的距离
            scrollTop
            -可以获取垂直滚动条滚动的距离
         */
         
        // alert(box4.scrollLeft);
        // alert(box4.scrollTop);

        // alert(box4.clientHeight);   //283
        // alert(box4.scrollHeight);  //600

        // alert(box4.scrollHeight-box4.clientHeight);
        //当满足scrollHeight-scrollTop==clientHeight
        //说明垂直滚动条滚动到底了

        //当满足scrollWidth-scrollLeft==clientWidth
        //说明水平滚动条滚动到底了

        // alert(box4.scrollHeight-box4.scrollTop);

        }
        }
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
    <br/>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <br>
    <div id="box3">
        <div id="box2" style="position:relative;">
            <div id="box1"></div>
        </div>    
    </div>
    
  
</body>
</html>